<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 600px; height: 400px;"></div>
	<script type="text/javascript">
		//请求电影类型数据
		var data = {};
		data['type'] = "剧情,古装,爱情,战争,悬疑,音乐,家庭,动作,冒险,奇幻,科幻,惊悚,动画,犯罪,同性,历史,纪录片,运动,儿童,歌舞";
		$.ajax({
			type : "post",
			url : "CountServlet",
			data : data,
			success : function(data) {
				var type = JSON.parse(data);

				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));

				var data = [ type['剧情'], type['古装'], type['爱情'], type['战争'],
						type['悬疑'], type['音乐'], type['家庭'], type['动作'],
						type['冒险'], type['奇幻'], type['科幻'], type['惊悚'],
						type['动画'], type['犯罪'], type['同性'], type['历史'],
						type['纪录片'], type['运动'], type['儿童'], type['歌舞'] ];
				// 指定图表的配置项和数据
				var option = {
					title : {
						text : '豆瓣电影类型统计'
					},
					tooltip : {},
					legend : {
						data : [ '数量' ]
					},
					xAxis : {
						data : [ "剧情", "古装", "爱情", "战争", "悬疑", "音乐", "家庭",
								"动作", "冒险", "奇幻", "科幻", "惊悚", "动画", "犯罪", "同性",
								"历史", "纪录片", "运动", "儿童", "歌舞" ]
					},
					yAxis : {},
					series : [ {
						name : '数量',
						type : 'bar',
						data : data
					} ]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		});
	</script>
</body>
</html>